    <script type="text/javascript">
    var timeTicket;
    function units_gb_or_tb(selector, hex) {
        if(selector.text() > hex && selector.text() < hex * hex){
            selector.text(parseInt(selector.text()/hex));
            selector.parent().parent().find("#capacity_unit").text("T")
        }
        if(selector.text() >= hex*hex){
            selector.text(parseInt(selector.text() /hex/hex));
            selector.parent().parent().find("#capacity_unit").text("P")
        }
    }
    units_gb_or_tb($("#license_capacity"), 1024)
    units_gb_or_tb($("#volume_capacity"), 1000); 
    $(window).load(function(){
        console.log($(".wrong-int").val());
    });
    </script>

    <style>
        .panel{
            margin-bottom: 0px;   
        }
        .panel-heading{
            padding:9.75px 11.25px 9.75px 15.75px;   
        }
        .panel-body{
            padding:0px;   
            border-radius: 3px;
        }
        .home_box_style{
            /*width:23.75%;*/
            /*float:left;
            margin-top:20px;
            /*margin-left:1%;*/
            border-radius:3px;
            margin:7.5px;
            background:#fff;
            border:1px solid #dddddd;
        }
        .amount{
            width:49%;
            border-right:1px solid #eee;
            height:162px;
            float:left;
        }
        .number{
            width:49%;   
            float:right;
            padding:15px;
        }
        .number ul li{
            color:#666666;
        }
        .amount-number{
            font-size:48px;
            margin-bottom:0px;
            text-align:center;
            vertical-align: middle;
            padding-top:45px;
            line-height: 40px;
            color:#495475;
        }
        .license_capacity{
            font-size:36px;
            padding-top:52px;
        }
        .amount-font{
            text-align:center;  
            padding-top:5%;
        }
        .number ul{
            list-style:none;
            margin:0 auto;
            padding:0;  
        }
        .number ul li{
           padding-top:15px;
            font-size: 12px;
            line-height: 12px;
        }
        .number ul li span{
            text-align:right;
            float:right;
        }
        .panel-heading{
            border-bottom:1px solid #dddddd;
            background: #fff;
        }
        .panel-heading a{
            color:#333333;
            font-size: 14px;
        }
        .panel-heading a i{
            font-size:18px;
            color: #c5cade;
        }
        .col-md-3,.col-md-4{
            padding:0px;
        }
        .col-md-6{
            padding-left: 0px;
            padding-right: 0px;
        }
        .box7,.box10,.box11{
            height:298px;
            padding:0px;
        }
        .amount-info{
            color:#c3c3c3;
            font-size: 10px;
            text-align: center;
            padding-top:14px;
            line-height: 10px;
        }
        @media screen and (max-width: 1440px) {
            .number {
                padding:5px;
            }
        }

        
    </style>

        <div class="panel-body" style="background-color:#ebecf2">
            
            <div class="home_title"><p>概览<!--<a href="#"><i class="fa fa-question-circle" style="font-size:13px;position:absolute;color:#333333"></i></a>--></p></div>
        <div style="padding:8px;">
        <div class="col-md-3">
        <div class="box1 home_box_style">
            <div class="panel-heading">
                <a href="">[[ 'host'|translate ]]</a>
                 <a href="" class="panel-right-i"><i class="fa fa-gear"></i></a>
            </div>
            <div class="panel-body n_panel-body">
                <div class="amount">
                    <p class="amount-number">{{ hosts|length }}</p>
                    <p class="amount-info">总节点数</p>
                </div>
                <div class="number">
                    <ul>
                        <li>正常<span>{{ normalhosts|length }}</span></li> 
                        <li>异常<span ng-style="{'color': {true: 'black', false: 'red'}[{{ failhosts|length }}==0]}">{{ failhosts|length }}</span></li>
                    </ul>
                </div>
            </div> <!-- panel-body -->
        </div>
        </div>
        <div class="col-md-3">
        <div class="box2 home_box_style">
            <div class="panel-heading">
                <a href="">[[ 'disk'|translate ]]</a>
                <a href="" class="panel-right-i"><i class="fa fa-gear"></i></a>
            </div>
            <div class="panel-body n_panel-body">
                <div class="amount">
                    <p class="amount-number">{{ disks|length }}</p>
                    <p class="amount-info">总磁盘数</p>
                </div>
                <div class="number">
                    <ul>
                        <li>正常<span>{{ normaldisks|length }}</span></li>     
                        <li>异常<span ng-style="{'color': {true: 'black', false: 'red'}[{{ faildisks|length }}==0]}">{{ faildisks|length }}</span></li>     
                        <!--<li>磁盘使用率<span>99.5%</span></li> -->
                        <!--<li>磁盘总量(G)<span>8</span></li>-->
                    </ul>
                </div>
            </div> <!-- panel-body -->
        </div>
        </div>

        {% if not is_fusionnas %}
        <div class="col-md-3">
        <div class="box3 home_box_style">
            <div class="panel-heading">
                <a href="">[[ 'volume'|translate ]]</a>
                <a href="" class="panel-right-i"><i class="fa fa-gear"></i></a>
            </div>
            <div class="panel-body n_panel-body">
                <div class="amount">
                    <p class="amount-number" title="{{cluster.volume_total}}G">
                        <span id="volume_capacity">{{ cluster.volume_total|int(0) }}</span>
                    </p>
                    <p class="amount-info">卷空间总量(<span id="capacity_unit">G</span>)
                    </p>

                </div>
                <div class="number">
                    <ul>
                        <li>iSCSI(个)<span>{{ iscis_volume_num }}</span></li>
                        <li>NBD(个)<span>{{ nbd_volume_num }}</span></li>
                        <li>异常卷<span ng-style="{'color': {true: 'black', false: 'red'}[{{ abnormal_volume_num }}==0]}">{{ abnormal_volume_num }}</span></li>
<!--                        <li>空间已用(G)<span>{{ volume_used_per }}%</span></li> -->
                    </ul>
                </div>
            </div> <!-- panel-body -->
        </div>
        </div>
        {% else %}
        <div class="col-md-3">
        <div class="box3 home_box_style">
            <div class="panel-heading">
                <a href="">[[ 'folder'|translate ]]</a>
                <a href="" class="panel-right-i"><i class="fa fa-gear"></i></a>
            </div>
            <div class="panel-body n_panel-body">
                <div class="amount">
                    <p class="amount-number" title="{{cluster.volume_total}}G">
                        <span id="volume_capacity">{{ folders|length }}</span>
                    </p>
                    <p class="amount-info" id="capacity_unit">数量（个）</p>
                </div>
                <div class="number">
                    <ul>
                        <li>正常（个）<span>{{ normalfolders|length }}</span></li>
                        <li>异常（个）<span ng-style="{'color': {true: 'black', false: 'red'}[{{ failfolders|length }}==0]}">{{ failfolders|length }}</span></li>
                        <!--<li>异常卷<span>{{ abnormal_volume_num }}</span></li>-->
                        <!--<li>空间已用(G)<span>{{ volume_used_per }}</span></li>-->
                    </ul>
                </div>
            </div> <!-- panel-body -->
        </div>
        </div>
        {% endif %}

        <div class="col-md-3">
        <div class="box4 home_box_style">
            <div class="panel-heading">
                <a href="">[[ 'accredit'|translate ]]</a>
                <a href="" class="panel-right-i"><i class="fa fa-gear"></i></a>
            </div>
            <div class="panel-body n_panel-body">
                <div class="amount">
                    <p class="amount-number license_capacity_" title="{{cluster.license_capacity_}}G">
                        <span id="license_capacity" style="font-size:30px" >{{cluster.license_stat_show}}</span>
                    </p>
                    <p class="amount-info" id="capacity_unit">授权状态</p>
                </div>
                <div class="number">
                    <ul>
                        <li>授权类型<span>{{cluster.license_stat_show}}</span></li>
                        <li>授权日期<span>{{cluster.register_date_at| default('', True)}}</span></li> 
                        <li>截止日期<span>{{cluster.invalid_date_at| default('', True)}}</span></li> 
                    </ul>
                </div>
            </div> <!-- panel-body -->
        </div>
        </div>
        <div class="col-md-3">
        <div class="box5 home_box_style">
        </div>
        </div>
        <div class="col-md-3">
        <div class="box6 home_box_style">
        </div>
        </div>
        <div class="col-md-3">
        <div class="box8 home_box_style">
        </div>
        </div>
        <div class="col-md-3">
        <div class="box9 home_box_style">
            <div class="panel-heading">
                <a href="">告警提示</a>
                <a href="" class="panel-right-i"><i class="fa fa-gear"></i></a>
            </div>
            <div class="panel-body n_panel-body">
                <div class="amount">
                    <p class="amount-number"  style="color:#e26a00">{{alerts_num}}</p>
                    <p class="amount-info">未确认告警</p>
                </div>
                <div class="number">
                    <ul>
                        <li>错误(个)<span>{{db_api.alert_count_error()}}</span></li> 
                        <li>警告(个)<span>{{db_api.alert_count_warn()}}</span></li>
                    </ul>
                </div>
            </div>
        </div>
        </div>
        <div class="col-md-4">
        <div class="box7 home_box_style">
        </div>
        </div>
        <div class="col-md-4">
        <div class="box11 home_box_style">
        </div>
        </div>
        <div class="col-md-4">
        <div class="box10 home_box_style">
            <div load-summary></div>
        </div>
            </div>
            </div>
        </div>
        
